import React from "react";
import "./ProjectDetail.css";
import TopNav from "../../components/TopNav/TopNav";
import { useNavigate } from "react-router";
function ProjectDetail() {
  const navigate = useNavigate();
  const handleBack = () => {
    console.log("返回上一页");

    navigate(-1);
  };
  return (
    <div className="project-container">
      {/* 顶部导航 */}
      <TopNav />

      {/* 返回按钮 */}
      <div className="back-btn" onClick={handleBack}>
        <i className="fas fa-arrow-left"></i>
        <span>返回项目列表</span>
      </div>
      <div className="">医疗应用(iOS原生)</div>

      {/* 主要内容 */}
      <div className="content-card">
        {/* 项目编号 */}
        <div className="info-row">
          <div>
            <div className="label">项目编号</div>
            <div className="value">PN0001245</div>
          </div>
          <button className="edit-btn">
            <i className="fas fa-edit"></i>
          </button>
        </div>

        {/* 项目描述 */}
        <div className="info-section">
          <div className="label">项目描述</div>
          <div className="description">
            为维护您的医疗记录、预约医生、存储检查结果及饮食的应用程序，来维护您的医疗记录、预约医生。
          </div>
        </div>

        {/* 报告人 */}
        <div className="info-section">
          <div className="label">报告人</div>
          <div className="reporter">
            <img src="/tou1.png" alt="" className="small-avatar" />
            <span>小张</span>
          </div>
        </div>

        {/* 执行人和优先级 */}
        <div className="flex-row">
          <div className="flex-col">
            <div className="label">执行人</div>
            <AvatarGroup />
          </div>
          <div className="flex-col">
            <div className="label">优先等级</div>
            <PriorityBadge />
          </div>
        </div>

        {/* 日期信息 */}
        <div className="info-section">
          <div className="label">截止日期</div>
          <div>2021-12-31</div>
        </div>

        <div className="create-time">创建于2020-09-12</div>
        <div className="bottom-toolbar">
          <div className="tool-buttons">
            <button className="tool-btn">
              <i className="fas fa-paperclip"></i>
            </button>
            <button className="tool-btn">
              <i className="fas fa-link"></i>
            </button>
          </div>
          <button className="add-btn">
            <i className="fas fa-plus"></i>
          </button>
        </div>
      </div>

      {/* 底部工具栏 */}
    </div>
  );
}

// 头像组组件
function AvatarGroup() {
  const avatars = ["/tou1.png", "/tou1.png", "/tou1.png"];

  return (
    <div className="avatar-group">
      {avatars.map((avatar, index) => (
        <img key={index} src={avatar} alt="" className="group-avatar" />
      ))}
    </div>
  );
}

// 优先级标签组件
function PriorityBadge() {
  return (
    <div className="priority-badge">
      <span className="priority-arrow">↑</span>
      <span>中</span>
    </div>
  );
}

export default ProjectDetail;
